import { useState } from 'react'
import { createRoot } from 'react-dom/client'
import { Subject } from 'rxjs'

export function render() {
  const rootElement = document.createElement('div')
  document.body.appendChild(rootElement)
  rootElement.id = 'root'
  createRoot(rootElement).render(<App />)
}

function App() {
  const [com, setCom] = useState(1)
  return com === 1 ? <Com1 go2={() => setCom(2)} /> : <Com2 go1={() => setCom(1)} />
}

function Com1({ go2 }: { go2: () => void }) {
  useEffect(() => {}, [])

  return <div>
    <div>com 1</div>
    <button onClick={go2}>go 2</button>
  </div>
}

function Com2({ go1 }: { go1: () => void }) {
  return <div>
    <div>com 2</div>
    <button onClick={go1}>go 1</button>
  </div>
}
